<template>
  <div class="container">
    <Middle>
      <el-card class="article">
        <el-input class="input-title" v-model="form.title" placeholder="请输入标题"/>
        <Markdown  ref="markdownRef" @on-save="handlerOnSave"/>
        <el-button type="primary" @click="handlerOnSave">发布</el-button>
      </el-card>
    </Middle>
  </div>
</template>

<script>
import Comments from "@/views/front/comments/Comments.vue";
import Middle from "@/views/layout/Middle";
import Markdown from 'vue-meditor'
import {MarkdownPreview} from 'vue-meditor'
import {postArticle} from "@/api/article";
import {getToken} from "@/utils/auth";

export default {
  name: 'AddArticle',
  data() {
    return {
      form: {
        title: '',
      }
    };
  },
  components: {
    Comments,
    Middle,
    Markdown,
    MarkdownPreview,
  },
  methods: {
    async handlerOnSave(val) {
      const editor = this.$refs.markdownRef
      const {form} = this
      if (form.title.length < 3) return this.$message.warning('标题至少3个字以上')
      if (editor.html.length < 10) return this.$message.warning('正文至少输入10个字以上')
      this.$confirm('此操作将发布文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await postArticle(0, {
          title: form.title,
          content: editor.html,
          authorId: getToken().id
        })
        console.log(res)
        if(res.meta>=300)  return this.$message.error('发布失败')
        this.$message.success('发布成功，待管理员审核后展示')
        this.$router.back()
      }).catch(() => {
      });

    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .input-title {
  font-weight: 600;
  font-size: 40px;
  border: none;

  .el-input__inner {
    border: none;
  }
}
</style>
